<template>
    <div>
        <!-- 控制tab选项 -->
        <Tab :lists="lists" @titleChange="titleChangeTodo"></Tab>

        <!-- 动态组件的传值将属性和监听事件放在component上即可使用 -->
        <component :is="componentLists[currentIndex]" name="Lee" @goShop="goShopToDo"></component>
        <!-- keep-alive的include表示名称匹配才缓存,一定要组件写名称 -->
        <keep-alive include="shop">

            <component :is="componentLists[currentIndex]" name="Lee" @goShop="goShopToDo"></component>
        </keep-alive>
    </div>
</template>

<script>
import ShopPage from './views/shop-page.vue'
import IndexPage from './views/index-page.vue'
import HomePage from './views/home-page.vue'
import Tab from './Tab.vue'
export default {
    components: {
        ShopPage,
        IndexPage,
        HomePage,
        Tab
    },
    data() {
        return {
            currentIndex: 0,
            lists: [
                "首页",
                "商城",
                "个人主页"
            ],
            componentLists: [
                "IndexPage",
                "ShopPage",
                "HomePage"
            ],
            contents: [
                "首页页面",
                "商城页面",
                "个人主页页面"
            ]
        }
    },
    methods: {
        titleChangeTodo(index) {
            this.currentIndex = index
        },
        goShopToDo() {
            console.log("goShopToDo")
        }
    }
}
</script>

<style lang="scss" scoped>
</style>